<template>
  <div class="menu-group" :style="menuStyle">
    <div class="datebox">
      <p class="time">
        <span id="time">
          <span class="hour">
            <Overlay :text="time.hour"></Overlay>
          </span>
          <span>:</span>
          <span class="minutes">
            <Overlay :text="time.minutes"></Overlay>
          </span>
          <span>:</span>
          <span class="second">
            <Overlay :text="time.second"></Overlay>
          </span>
        </span>
      </p>
      <p class="date-week">
        <span class="date">
          {{ time.date }}
        </span>
        <span class="week">
          {{ time.week }}
        </span>
      </p>
    </div>
    <ul class="shortcut_nav">
      <li
        v-for="(item, index) in menuData.menuList"
        :class="item.path === active ? 'active' : ''"
        :key="'shortcut-' + item.id+'-shortcut'"
        v-if="item.shortcut&&!item.hide"
      >
        <a @click="_onSelect(item.path)" :class="item.icon||item.path">{{ item.menuName }}</a>
      </li>
    </ul>
    <div class="menu-button" ref="menuButton">
      <div class="menu-icon"></div>
      <div id="menu-buttons" class="hidden-menu" ref="hiddenMenu">
        <dl v-for="(item, index) in menuData.menusTree" :key="item.id" v-if="!item.hide">
          <dt>{{ item.menuName }}</dt>
          <dd>
            <ul
              class="menu-list"
              v-if="item.children && item.children.length > 0"
            >
              <li
                v-for="(child, cindex) in item.children"
                :key="child.id"
                :class="child.path === active ? 'active' : ''"
              >
                <a @click="_onSelect(child.path)">{{ child.menuName }}</a>
              </li>
            </ul>
          </dd>
        </dl>
        <div class="user-botton">
          <a class="username" @click="userinfo()">{{
            loginInfo.name
          }}</a>
          <a class="exitbtn editPwd" @click="pwd()">修改密码</a>
          <a class="exitbtn" @click="loginOut()">退出</a>
        </div>
      </div>
    </div>
    <Version ref="version"></Version>
    <UserInfo ref="userinfo"></UserInfo>
    <Pwd ref="pwd"></Pwd>
  </div>
</template>

<script>
import DateTime from '@/lib/date-time';
import Version from '@/common/headecomponents/version.vue';
import UserInfo from '@/common/headecomponents/userinfo.vue';
import Pwd from '@/common/headecomponents/pwd.vue';
import Overlay from '@/common/Overlay.vue';
// let OverlayConstructor = Vue.extend(Overlay);

export default {
  name: 'GroupMenu',
  components: { Version, UserInfo, Pwd, Overlay },
  data() {
    return {
      time: {
        hour: '',
        minutes: '',
        second: '',
        date: '',
        week: '',
      },
      active: '',
      offsetLeft: 0,
    };
  },
  watch: {
    activeMenu: {
      handler(val, oldVal) {
        if (val && val.length > 0) {
          this.active = val[0].path;
          if (!val[0].hide) {
            this.$emit('onActive', val[0], val[1], oldVal);
          }

        }
      },
    },
  },
  computed: {
    defaultActive() {
      return this.$store.getters.getDefaultActive;
    },
    activeMenu() {
      return this.$store.getters.getActiveMenu;
    },
    menuData() {
      return this.$store.getters.getMenuData;
    },
    menuStyle() {
      return {
        '--active-color': 'rgb(255, 208, 75)',
        '--offset-left': -this.offsetLeft + 'px',
      };
    },
    loginInfo() {
      return this.$store.getters.getLoginInfo;
    },
  },
  methods: {
    _onSelect(index, paths) {
      this.$store.commit('setActiveMenu', [index]);

      // this.$store.dispatch('setRouterAlive', false);
      // this.$nextTick(function() {
      //   this.$store.dispatch('setRouterAlive', true);
      // });

      // this.$emit('onActive', index, from, params);
      localStorage.setItem('menu_active', index);
    },
    version() {
      this.$refs['version'].show();
    },
    userinfo() {
      this.$refs['userinfo'].show();
    },
    pwd() {
      this.$refs['pwd'].show();
    },
    // 退出登录
    loginOut() {
      this.$confirm('确定要退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$store.dispatch('clearLoginInfo');
          this.$store.dispatch('clearMenu');
          // this.$axiosInstance({
          //   method: 'get',
          //   url: 'loginOut',
          // })
          //   .then((res) => {
          this.$router.push({ path: '/login' });
          // })
          // .catch(function(error) {
          //   this.$router.push({ path: '/login' });
          // });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.offsetLeft =
        this.$refs['hiddenMenu'].getBoundingClientRect().width -
        (document.body.offsetWidth -
          this.$refs['menuButton'].getBoundingClientRect().left);

      new DateTime((d) => {
        this.time.date = d.year + '年' + d.month + '月' + d.date + '日';
        this.time.week = d.week;
        this.time.hour = d.h;
        this.time.minutes = d.m;
        this.time.second = d.s;
      });

      //   if (localStorage.getItem('menu_active') !== 'null' && localStorage.getItem('menu_active') !== 'undefined' && localStorage.getItem('menu_active')) {
      //     this.active = localStorage.getItem('menu_active');
      //   } else {
      //     // TODO 应该登录后菜单存储到store中
      //     // this.active = this.$store.state.authority.menuData[0].path;
      //     this.active = this.menus[0].children[0].path;
      //   }
      // if (
      //   this.loginInfo &&
      //   'admin' === this.loginInfo.name &&
      //   this.loginInfo.id !== -1
      // ) {
      //   this.active = 'page';
      // } else {
      //
      // }
      this.active = this.defaultActive;
      this.$store.commit('setActiveMenu', [this.active]);
    });
  },
  created() {},
};
</script>

<style scoped lang="less">
.menu-group {
  padding-right: 15px;
  float: right;
  display: flex;
  align-items: center;
  /deep/.shortcut_nav {
    margin: 0;
    padding: 0;
    float: left;
    font-size: 0;
    li {
      width: 112px;
      height: 55px;
      cursor: pointer;
      display: inline-block;
      margin: 0 5px;
      border: 1px solid rgba(91, 192, 222, 0.9);
      border-radius: 5px;
      transition: 0.5s;
      &:hover {
        box-shadow: inset 0px 0px 19px rgba(91, 192, 222, 0.9);
        color: var(--active-color);
      }
      > * {
        color: #FFFFFF;
        display: block;
        text-align: center;
        padding-top: 30px;
        font-size: 15px;
        font-weight: 600;
      }
    }
    li.active {
      box-shadow: inset 0px 0px 19px rgba(91, 192, 222, 0.9);
      color: var(--active-color);
    }
  }

  /deep/.datebox {
    width: 155px;
    float: left;
    margin: 0;
    line-height: 30px;
    overflow: hidden;
    border-right: solid 1px #bbbbbb;
    font-size: 14px;
    line-height: 30px;
    p {
      margin: 0;
    }
    .time {
      font-size: 30px;
    }
    .date-week {
      font-size: 14px;
    }
    #time {
      padding-left: 0;
      word-spacing: 8px;
      letter-spacing: 2px;
    }
    #week {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  /deep/.menu-button {
    display: inline-block;
    position: relative;
    width: 58px;
    height: 55px;
    cursor: pointer;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    .menu-icon{
      border:1px solid transparent;
      position:absolute;
      top: calc(50% - 10px);
      left: calc(50% - 10px);
      width: 20px;
      height: 20px;
      &:before{
        content: '';
        display: block;
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        background-color: #ffffff;
        padding: 6px 0;
        background-clip: content-box;
        transition:transform .3s;
      }
      &:after{
        content: '';
        display: block;
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        background-color: #ffffff;
        padding: 6px 0;
        background-clip: content-box;
        transition: transform .3s;
      }
    }
    &:hover{
      > .hidden-menu {
        z-index: 1000;
        left: var(--offset-left);
        opacity: 1;
      }
      .menu-icon{
        &::before{
          border-top: 0px solid #ffffff;
          border-bottom: 0px solid #ffffff;
          padding: 8px 0;
          transform: rotate(45deg);
        }
        &::after{
          border-top: 0px solid #ffffff;
          border-bottom: 0px solid #ffffff;
          padding: 8px 0;
          transform: rotate(-45deg);
        }
      }
    }

    .hidden-menu {
      transition: left 0.3s cubic-bezier(0.6, 0.6, 0.57, 1.1),
        opacity 0.6s ease-in-out, z-index 0.6s ease-in-out;
      background-color: rgb(84, 92, 100);
      z-index: -1;
      opacity: 0;
      left: 0;
      // z-index: 999;
      // opacity: 1;
      // left: -460px;
      top: 55px;
      border: 1px solid #e6e6e6;
      position: absolute;
      overflow-y: auto;
      width: 460px;
      max-height: 400px;
      padding: 10px;
      border-radius: 15px 0 0 15px;
      box-shadow: -3px 4px 8px -3px #545c64;
      dl {
        padding-top: 18px;
        margin-bottom: 2px;
        line-height: 25px;
        color: #fff;
        width: 100%;
        border-radius: 15px 0 0 10px;
        display: inline-block;
        background: rgba(67, 74, 80, 0);
        transition: 0.3s;
        &:hover {
          background: rgb(67, 74, 80);
        }
        position: relative;
        &::after {
          content: "";
          width: 100%;
          height: 1px;
          border-bottom: dotted 1px #333;
          left: 0;
          bottom: -4px;
          position: absolute;
        }
        dt {
          float: left;
          font-weight: bold;
          background: url()
            no-repeat right center;
          width: 120px;
          font-size: 14px;
          padding-right: 15px;
          line-height: initial;
          text-align: right;
          position: relative;
          &:after {
            content: "";
            display: block;
            top: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            transform: translateX(-100%);
            background: inherit;
            -webkit-filter: drop-shadow(14px 0 0 #fff);
            filter: drop-shadow(120px 0px 0 #fff);
          }
        }
        dd {
          width: 310px;
          line-height: initial;
          font-size: 14px;
          float: left;
          .menu-list {
            list-style: none;
            margin: 0;
            padding: 0;
            li {
              margin: 0 10px 15px 10px;
              float: left;

              > a {
                padding: 5px 8px;
                transition: 0.3s;
                border: 1px solid transparent;
                border-radius: 5px;
                &:hover {
                  color: var(--active-color);
                  border: 1px solid rgba(91, 192, 222, 0.9);
                  box-shadow: inset 0px 0px 19px rgba(91, 192, 222, 0.9);
                }
              }
            }
            li.active {
              > a {
                box-shadow: inset 0px 0px 19px rgba(91, 192, 222, 0.9);
                color: var(--active-color);
              }
            }
          }
        }
      }
    }
  }
  /deep/.user-botton {
    text-align: right;
    padding-bottom: 5px;
    a {
      font-size: 14px;
      color: #56aefa;
      margin: 0 3px;
      text-decoration: none;
      &:hover {
        color: var(--active-color);
      }
    }
  }
}
</style>
